<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }" :style="{ margin: '20px' }">
      <template #header>
        <el-button type="primary" size="default" icon="el-icon-plus" @click="showAddDialog">添加</el-button>

      </template>
      <el-table :data="tmList" border stripe>
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column label="品牌名称" prop="tmName">
        </el-table-column>
        <el-table-column label="品牌LOGO">
          <template v-slot="{ row }">
            <el-image :src="row.logoUrl" fit="fill" style="width:100px"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row, $index }">
            <el-button type="warning" size="default" @click="showUpdateDialog(row)" icon="el-icon-edit"></el-button>
            <el-button type="danger" size="default" @click="delTM(row)" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>


    </el-card>

    <!-- 弹窗 -->
    <el-dialog :title="tmInfo.id ? '修改品牌' : '添加品牌'" :visible.sync="dialogVisible" width="40%">
      <el-form :model="tmInfo" ref="ruleForm" :rules="tmInfoRule" label-width="100px" :inline="false" size="normal">
        <el-form-item label="品牌名称" prop="tmName">
          <el-input v-model="tmInfo.tmName" placeholder="" size="default" clearable @change=""></el-input>
        </el-form-item>

        <el-form-item label="品牌LOGO" prop="logoUrl">
          <el-upload class="avatar-uploader" action="/dev-api/admin/product/upload" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="tmInfo.logoUrl" :src="tmInfo.logoUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span>上传2M以内JPG格式图片</span>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateTm">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script >
import { reqTMList, reqAddTM, reqUpdateTM, reqDelTM } from '@/api/product/trademark'
export default ({
  name: "trademark",
  data() {
    return {
      currentPage: 1,
      pageSize: 3,
      total: 10,
      tmList: [],
      dialogVisible: false,//控制弹窗显示
      tmInfo: {
        tmName: '',//品牌名称
        logoUrl: '',//新增品牌的图片
      },//单个品牌数据

      // 表单单独校验规则
      tmInfoRule: {
        tmName: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        logoUrl: [
          {
            required: true,
            message: "请上传品牌图片",
            trigger: "change", //无论写什么都可以,因为整体校验才会触发
          },
        ],
      }
    }
  },
  mounted() {
    this.getTMList()
  },

  // watch: {
  //   currentPage: {
  //     handler() {
  //       this.getTMList()
  //     }
  //   },
  //   pageSize: {
  //     handler() {
  //       this.getTMList()
  //     }
  //   }
  // },
  methods: {
    // 获取品牌列表
    async getTMList() {
      try {
        let res = await reqTMList(this.currentPage, this.pageSize)
        // console.log(res);
        this.tmList = res.data.records
        this.total = res.data.total
        // console.log(this.tmList);
      } catch (error) {
        alert(error)
      }

    },
    // pagesize变化
    handleSizeChange(val) {
      this.pageSize = val
      this.getTMList()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTMList()
    },

    //弹窗的函数
    handleAvatarSuccess(res, file) {
      // console.log(res, 'res');
      this.tmInfo.logoUrl = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },


    // 新增品牌
     addOrUpdateTm() {
      // 表单整体验证
       this.$refs.ruleForm.validate(async (success) => {
        if (success) {
          let tmInfoId = this.tmInfo.id
          try {
            // console.log(logoUrl, tmName);
            if (tmInfoId) {
              await reqUpdateTM(this.tmInfo)
              this.$message.success('修改品牌成功')
            } else {
              await reqAddTM(this.tmInfo)
              this.$message.success('新增品牌成功')
            }
            this.dialogVisible = false
            this.getTMList()
          } catch (error) {
            alert(error.message)
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      })



    },

    // 确定新增品牌
    showAddDialog() {
      this.dialogVisible = true
      // 清空输入框和图片
      this.tmInfo = {
        tmName: '',
        logoUrl: '',
      }
    },

    // 修改更新品牌
    showUpdateDialog(row) {
      // 回填数据
      this.dialogVisible = true
      console.log(row, 'row');
      this.tmInfo = { ...row }

    },

    // 删除品牌
    async delTM(row) {
      try {
        await reqDelTM(row.id)
        this.getTMList()
      } catch (error) {
        alert(error.message)
      }
    }
  },
});
</script>



<style  scoped lang="scss">
.avatar-uploader .el-icon-plus {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>